<template>
    <div>
        <div
            class="xzcs-pc-kjfgk-detail"
            :class="{ 'gaussian-blur': showNoLogin }"
        >
            <div class="tabs-top">
                <nuxt-link
                    v-for="(item, index) in tabsList"
                    :class="{ 'tabs-active': tabsIndex == index }"
                    :key="index"
                    class="tab"
                    :to="`/kjfgk/${item.pathName}/0/1`"
                >
                    {{ item.name }}
                </nuxt-link>
            </div>

            <div class="regulation">
                <div class="breadcrumb-seek">
                    <breadcrumb>
                        <el-breadcrumb separator-class="el-icon-arrow-right">
                            <el-breadcrumb-item>
                                <nuxt-link to="/"> 首页 </nuxt-link>
                            </el-breadcrumb-item>
                            <el-breadcrumb-item>
                                <nuxt-link to="/kjfgk/index/0/1">
                                    会计法规库
                                </nuxt-link>
                            </el-breadcrumb-item>
                            <el-breadcrumb-item>
                                <nuxt-link :to="`/kjfgk/${typePath}/0/1`">
                                    {{ getType }}
                                </nuxt-link>
                            </el-breadcrumb-item>
                            <el-breadcrumb-item
                                v-if="infoData && infoData.name"
                            >
                                {{ infoData.name }}
                            </el-breadcrumb-item>
                        </el-breadcrumb>
                    </breadcrumb>
                    <no-ssr placeholder="">
                        <div class="seek">
                            <el-input
                                v-model="seekInput"
                                placeholder="请输入内容"
                            ></el-input>
                            <div class="button" @click="keywordRed">
                                <i class="el-icon-search"></i>查找
                            </div>
                        </div>
                    </no-ssr>
                </div>
                <div class="regulation-con">
                    <div class="left_flip">
                        <div class="factor">
                            <div class="factor_title">
                                <i class="el-icon-document factor_icon"></i>
                                内容要素
                            </div>
                            <div class="line"></div>
                            <div v-if="infoData" class="factor_content">
                                <div class="factor_item">
                                    <div class="item_label">效力注释：</div>
                                    <div class="item_txt">
                                        {{ infoData.active_info }}
                                    </div>
                                </div>
                                <div class="factor_item">
                                    <div class="item_label">发文日期：</div>
                                    <div class="item_txt">
                                        {{ infoData.push_date }}
                                    </div>
                                </div>
                                <div class="factor_item">
                                    <div class="item_label">发文字号：</div>
                                    <div class="item_txt">
                                        {{ infoData.push_number }}
                                    </div>
                                </div>
                                <div class="factor_item">
                                    <div class="item_label">发文机关：</div>
                                    <div class="item_txt">
                                        {{ infoData.push_department }}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <no-ssr placeholder="">
                            <div class="factor factor-sticky">
                                <div class="factor_title">
                                    <img
                                        src="~/assets/images/regulations/gzh.png"
                                        alt=""
                                    />
                                    关注公众号
                                </div>
                                <div class="line"></div>
                                <div class="wx-gzh-con">
                                    <img
                                        src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/xzwd-gzh-code.png"
                                        alt=""
                                    />
                                    <div class="wx-gzh-con-text">
                                        <div class="wx-gzh-con-title">
                                            关注公众号
                                        </div>
                                        实时接收最新法规库及考试资讯
                                    </div>
                                </div>
                            </div>
                        </no-ssr>
                    </div>

                    <div class="right info">
                        <div class="info-content">
                            <div class="caozuo-list">
                                <div class="caozuo-item" @click="setCollection">
                                    <img
                                        :src="
                                            infoData && infoData.is_collect
                                                ? collectionS
                                                : collection
                                        "
                                        alt=""
                                    />
                                    收藏
                                </div>
                                <!-- <div
                                    class="caozuo-item"
                                    @click="changeFontSize()"
                                >
                                    <img
                                        src="~/assets/images/regulations/T.png"
                                        alt=""
                                    />
                                    字体
                                </div> -->
                                <div class="font-size-type">
                                    <div
                                        :class="{
                                            'size-active': fontSizeIndex == 0,
                                        }"
                                        @click="changeFontSize(0)"
                                    >
                                        小
                                    </div>
                                    <div
                                        :class="{
                                            'size-active': fontSizeIndex == 1,
                                        }"
                                        @click="changeFontSize(1)"
                                    >
                                        中
                                    </div>
                                    <div
                                        :class="{
                                            'size-active': fontSizeIndex == 2,
                                        }"
                                        @click="changeFontSize(2)"
                                    >
                                        大
                                    </div>
                                </div>
                            </div>
                            <el-skeleton v-show="loading" :rows="20" animated />

                            <h1 class="info-title">
                                {{ infoData && infoData.name }}
                            </h1>
                            <div
                                v-if="
                                    infoData &&
                                    !infoData.notice &&
                                    infoData.abstract
                                "
                                class="info-abstract"
                                v-html="'小竹前瞻：' + infoData.abstract"
                            ></div>

                            <div
                                v-if="infoData && infoData.notice"
                                class="xzts"
                            >
                                <img
                                    class="xzts-img"
                                    src="~/assets/images/regulations/xzts.png"
                                    :alt="infoData.notice"
                                />
                                <div class="xzts-text">
                                    <div class="xzts-title">小竹提示</div>
                                    {{ infoData.notice }}
                                </div>
                            </div>

                            <div
                                class="content"
                                :class="[fontSizeList[fontSizeIndex]]"
                                v-html="info_content"
                                @click="imageEnlargement"
                            ></div>
                        </div>
                        <div class="up-down">
                            <div v-if="infoData" class="prev-next">
                                <div v-if="infoData.prevdata">
                                    <div class="name">
                                        上一篇：
                                        <nuxt-link
                                            :to="`/kjfgk/${infoData.prevdata.id}.html`"
                                            target="_blank"
                                            rel="prev"
                                        >
                                            {{ infoData.prevdata.name }}
                                        </nuxt-link>
                                    </div>
                                    <div class="time">
                                        {{ infoData.prevdata.push_date }}
                                    </div>
                                </div>
                                <div v-if="infoData.nextdata">
                                    <div class="name">
                                        下一篇：
                                        <nuxt-link
                                            :to="`/kjfgk/${infoData.nextdata.id}.html`"
                                            target="_blank"
                                            rel="next"
                                        >
                                            {{ infoData.nextdata.name }}
                                        </nuxt-link>
                                    </div>
                                    <div class="time">
                                        {{ infoData.nextdata.push_date }}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="reading">
                            <recommendedReading
                                :readingList="readingList"
                                titleKey="name"
                                textKey="info_content"
                                toType="kjfgk"
                            ></recommendedReading>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <no-ssr placeholder="">
            <el-image
                class="my-img"
                v-show="false"
                ref="myImg"
                src=""
                :preview-src-list="previewList"
            >
            </el-image>
        </no-ssr>
    </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";

import { getNormInfo, setNormCollect } from "@/assets/api/regulationsApi.js";
import { getanalysedata2 } from "@/assets/api/indexApi";
import { recommend_norm } from "@/assets/api/quizData";

import {
    goTop,
    goTopSmooth,
    wrapText,
    getArr_objKey,
    replaceurl,
    getText,
    internally,
} from "@/assets/utils/utils.js";

import breadcrumb from "@/components/index/breadcrumb.vue";

import collectionS from "@/assets/images/regulations/collection_s.png";
import collection from "@/assets/images/regulations/collection.png";

// 推荐阅读组件
import recommendedReading from "@/components/recommendedReading/index-router.vue";

import moment from "moment";

export default {
    components: {
        breadcrumb,
        recommendedReading,
    },
    async asyncData({ params }) {
        let data = {
            id: 0,
            infoData: null,
            info_content: "",
            mateInfo: {
                title: "会计法规库",
                keywords: "",
                description: "",
            },
            readingList: [], //推荐阅读列表
            jsonld: {
                "@context": "https://ziyuan.baidu.com/contexts/cambrian.jsonld",
                "@id": "https://www.xzcs2022.com/kjfgk/",
                images: [""],
                title: "",
                description: "",
                pubDate: "",
                upDate: "",
            },
            typePath: "index",
        };

        data.id = parseInt(params.id.replace(".html", ""));
        data.jsonld["@id"] += params.id;
        const res = await getNormInfo({
            id: data.id,
        });
        if (res.code == 1) {
            data.infoData = res.data;
            data.info_content = res.data.info_content;
            data.info_content = internally(data.info_content);

            data.info_content = replaceurl(data.info_content, res.data.name);
            data.mateInfo.title = data.infoData.name;

            let abstract = data.infoData.abstract;
            if (!data.infoData.abstract) {
                abstract = getText(data.info_content, 90);
            }
            data.mateInfo.description = abstract;

            data.jsonld.title = data.infoData.name;
            data.jsonld.description = abstract;
            data.jsonld.pubDate = data.jsonld.upDate = moment(
                data.infoData.createtime * 1000
            ).format("YYYY-MM-DD");
        }

        const res2 = await recommend_norm({
            limit: 20,
        });
        if (res2.code == 1) {
            data.readingList = res2.data;
        }
        return data;
    },
    head() {
        return {
            script: [
                {
                    type: "application/ld+json",
                    innerHTML: JSON.stringify(this.jsonld),
                },
            ],
            __dangerouslyDisableSanitizers: ["script"],
            title: this.mateInfo.title + "-【小竹财税平台】",
            meta: [
                {
                    hid: "keywords",
                    name: "keywords",
                    content: this.mateInfo.keywords,
                },
                {
                    hid: "description",
                    name: "description",
                    content: this.mateInfo.description,
                },
            ],
        };
    },
    layout: "home",
    data() {
        return {
            // tabsList: [
            //     {
            //         name: "首页",
            //         id: "86",
            //         class: [{ id: 86 }],
            //     },
            // ],
            tabsIndex: 0,
            tabsTwoIndex: 0,

            // id: 0,

            // infoData: null,

            collectionS: collectionS,
            collection: collection,

            fontSizeList: ["font-small", "font-medium", "font-large"],
            fontSizeIndex: 1,

            previewList: [],

            // mateInfo: {
            //     title: "会计法规库",
            //     keywords: "",
            //     description: "",
            // },

            seekInput: "",
            // info_content: "",
            questionsInfo: {},

            loading: false,

            showNoLogin: false,
        };
    },
    created() {
        // this.id = parseInt(this.$route.params.id.replace(".html", ""));
        // this.getMetaInfo();
    },
    mounted() {
        this.setmenuIndex("4");

        if (this.$route.params.type) {
            this.tabsIndex = getArr_objKey(
                this.tabsList,
                this.$route.params.type.replace(".html", ""),
                "pathName"
            );
        }

        // 获取会计法规库类目
        // this.getNormAllclass();
        this.$nextTick(() => {
            this.getData();
            getanalysedata2({
                m_id: 3,
                type: 1,
                code: "PE11",
                describe: this.infoData.name,
            });
            goTop(0);
        });
    },
    computed: {
        ...mapState("common", {
            isFooterShow: (state) => state.isFooterShow,
        }),
        ...mapState("regulations", {
            tabsList: (state) => state.ATabsList,
        }),

        getType: function () {
            if (this.infoData) {
                let text = "";
                if (this.infoData.kjptype == 1) {
                    text = "企业会计";
                    this.typePath = "qykj";
                } else if (this.infoData.kjptype == 2) {
                    text = "证监会";
                    this.typePath = "zjh";
                } else if (this.infoData.kjptype == 3) {
                    text = "政府会计";
                    this.typePath = "zfkj";
                } else if (this.infoData.kjptype == 4) {
                    text = "国际会计";
                    this.typePath = "gjkj";
                } else if (this.infoData.kjptype == 5) {
                    text = "企业内控";
                    this.typePath = "qynk";
                } else if (this.infoData.kjptype == 6) {
                    text = "全行业会计核算";
                    this.typePath = "qhykjhs";
                } else if (this.infoData.kjptype == 7) {
                    text = "其他会计法规";
                    this.typePath = "qtkjfg";
                } else if (this.infoData.kjptype == 8) {
                    text = "全科目核算";
                    this.typePath = "qkmhs";
                }
                return text;
            } else return "";
        },
    },
    methods: {
        ...mapMutations("common", ["setmenuIndex"]),

        async getData() {
            // this.loading = true;
            const res = await getNormInfo({
                id: this.id,
            });
            if (res.code == 1) {
                this.infoData = res.data;
                // this.info_content = res.data.info_content;
                this.mateInfo.title = this.infoData.name;
                this.mateInfo.description = this.infoData.abstract;
                // this.getNormAllclass();
                // this.getreadingList();
                // let that = this;
                // this.$nextTick(() => {
                //     that.loading = false;
                // });
            } else if (res.code == -100) {
                this.$alert(
                    `<div style='text-align: left'>今日免费次数已用完，请您充值成为会员，以享受更多精彩的功能和服务。</div>`,
                    "温馨提示",
                    {
                        customClass: "vip-message-box",
                        dangerouslyUseHTMLString: true,
                        showClose: false,
                        closeOnClickModal: false,
                        confirmButtonText: "加入会员",
                        callback: (action) => {
                            this.$router.push({
                                path: "/user/myvip",
                            });
                        },
                    }
                );
                this.showNoLogin = true;
            }
        },

        getMetaInfo() {
            if (this.$route.params.type == "index") {
                this.mateInfo.title = "小竹会计法规库";
                this.mateInfo.keywords = "小竹会计法规库,会计法规库";
                this.mateInfo.description =
                    "小竹会计法规库汇集最新的会计法规政策及地方性会计法规政策，时时更新会计法规动态，方便会计从业者能得到更多的会计法规查询。";
            } else if (this.$route.params.type == "qykj") {
                this.mateInfo.title = "企业会计法规";
                this.mateInfo.keywords = "企业会计法规";
                this.mateInfo.description =
                    "小竹财税企业会计法规版块，汇集众多企业会计法规。实时更新企业会计法规条例及相关企业会计法规政策出台，并积极推动企业会计法规宣传与发布。";
            } else if (this.$route.params.type == "zjh") {
                this.mateInfo.title = "证监会法规";
                this.mateInfo.keywords = "证监会法规";
                this.mateInfo.description =
                    "小竹财税证监会法规版块，汇集众多证监会法规，实时更新证监会法规条例及相关证监会法规政策出台，并积极推动证监会法规宣传与发布。";
            } else if (this.$route.params.type == "zfkj") {
                this.mateInfo.title = "政府会计法规";
                this.mateInfo.keywords = "政府会计法规";
                this.mateInfo.description =
                    "小竹财税政府会计法规版块，汇集众多政府会计法规，实时更新政府会计法规条例及相关证政府会计法规政策出台，并积极推动政府会计法规宣传与发布。";
            } else if (this.$route.params.type == "gjkj") {
                this.mateInfo.title = "国际会计法规";
                this.mateInfo.keywords = "国际会计法规";
                this.mateInfo.description =
                    "小竹财税国际会计法规版块，汇集众多国际会计法规，实时更新国际会计法规条例及相关国际会计法规政策出台，并积极推动国际会计法规宣传与发布。";
            } else if (this.$route.params.type == "qynk") {
                this.mateInfo.title = "企业会计内控法规";
                this.mateInfo.keywords = "企业会计内控法规";
                this.mateInfo.description =
                    "小竹财税企业会计内控法规版块，汇集众多企业会计内控法规，实时更新企业会计内控法规条例及相关企业会计内控法规政策出台，并积极推动企业会计内控法规宣传与发布。";
            } else if (this.$route.params.type == "qhykjhs") {
                this.mateInfo.title = "全行业会计核算";
                this.mateInfo.keywords = "全行业会计核算";
                this.mateInfo.description =
                    "小竹财税全行业会计核算版块，汇集众多全行业会计核算案例，实时更新全行业会计核算资讯及相关全行业会计核算法规政策出台，并积极推动全行业会计核算宣传与发布。";
            } else if (this.$route.params.type == "qtkjfg") {
                this.mateInfo.title = "会计法规条例";
                this.mateInfo.keywords = "会计法规条例";
                this.mateInfo.description =
                    "小竹财税会计法规条例版块，汇集众多会计法规条例，实时更新会计法规条例及相关会计法规条例政策出台，并积极推动会计法规条例宣传与发布。";
            } else if (this.$route.params.type == "qkmhs") {
                this.mateInfo.title = "全科目会计核算";
                this.mateInfo.keywords = "全科目会计核算";
                this.mateInfo.description =
                    "小竹财税全科目会计核算版块，汇集众多全科目会计核算案例，实时更新全科目会计核算资讯及相关全科目会计核算法规政策出台，并积极推动全科目会计核算法规宣传与发布。";
            }
        },

        // 点击富文本
        imageEnlargement(e) {
            if (e.target.nodeName == "IMG") {
                //判断点击富文本内容为img图片
                this.previewList = [e.target.currentSrc];
                this.$refs.myImg.showViewer = true;
            }
        },

        // 点击收藏
        async setCollection() {
            const res = await setNormCollect({
                id: this.id,
            });
            if (res.code == 1) {
                this.infoData.is_collect == 0
                    ? (this.infoData.is_collect = 1)
                    : (this.infoData.is_collect = 0);
                if (this.infoData.is_collect == 1) {
                    this.$message({
                        message: "收藏成功",
                        type: "success",
                    });
                } else {
                    this.$message({
                        message: "取消收藏",
                        type: "warning",
                    });
                }
            }
        },

        // 获取会计法规库类目
        // async getNormAllclass() {
        //     this.tabsIndex = this.$route.query.index
        //         ? parseInt(this.$route.query.index)
        //         : null;
        //     this.tabsTwoIndex = this.$route.query.index
        //         ? parseInt(this.$route.query.indexTwo)
        //         : 0;

        //     let accountingTabs = localStorage.getItem("accountingTabs");
        //     if (accountingTabs) {
        //         accountingTabs = JSON.parse(accountingTabs);
        //         if (accountingTabs.length > 0) {
        //             this.tabsList = accountingTabs;
        //             this.getCAKjType();

        //             return;
        //         }
        //     }
        //     const res = await getNormAllclass({});
        //     if (res.code == 1) {
        //         for (let key in res.data) {
        //             let item = res.data[key].oneclass;
        //             item.class = res.data[key].twoclass;
        //             this.tabsList.push(item);
        //         }
        //         localStorage.setItem(
        //             "accountingTabs",
        //             JSON.stringify(this.tabsList)
        //         );
        //         this.getCAKjType();
        //     }
        // },

        // // 获取详情的对应下标
        // getCAKjType() {
        //     // console.log(this.tabsList);
        //     for (let i = 0; i < this.tabsList.length; i++) {
        //         let item = this.tabsList[i];
        //         if (item.id == this.infoData.kjptype) {
        //             this.tabsIndex = i;
        //             for (let j = 0; j < item.class.length; j++) {
        //                 if (item.class[j].id == this.infoData.ctype) {
        //                     this.tabsTwoIndex = j;
        //                     return;
        //                 }
        //             }
        //         }
        //     }
        // },

        // 切换字体
        changeFontSize(index = null) {
            if (index !== null) {
                this.fontSizeIndex = index;
                return;
            }
            if (this.fontSizeIndex == 2) {
                this.fontSizeIndex = 0;
            } else {
                this.fontSizeIndex += 1;
            }
        },

        // 回到顶部
        gotop() {
            goTopSmooth();
        },

        keywordRed() {
            this.seekInput = this.seekInput.replace(/\s/g, "");
            if (!this.seekInput) return;
            let regex = /^[A-Za-z]+$/;
            if (regex.test(this.seekInput)) return;
            let keywords = [this.seekInput];
            let numStr = wrapText(this.infoData.info_content, keywords);
            this.info_content = numStr.str;
            this.$alert(`本页面共有${numStr.num}处符合`, "查找完成", {
                confirmButtonText: "确定",
            });
        },
    },
};
</script>

<style lang="scss">
.xzcs-pc-kjfgk-detail {
    position: relative;

    .gaussian-blur {
        -webkit-filter: blur(7px);
        filter: blur(7px);
        overflow: hidden;
        * {
            -webkit-filter: blur(7px);
            filter: blur(7px);
            overflow: hidden;
        }
    }

    .content {
        em {
            color: #ffffff !important;
            background: #f56c6c;
        }
    }

    .breadcrumb-seek {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 1200px;
        margin: 0 auto;

        .breadcrumb {
            width: auto;
        }

        .seek {
            padding-top: 30px;

            display: flex;
            align-items: center;

            .el-input__inner {
                height: 40px;
                width: 361px;
                border: none;
                border-radius: 0;
                position: relative;
                left: 15px;
            }

            .button {
                cursor: pointer;
                width: 91px;
                height: 39px;
                background: #1c87f3;
                color: #ffffff;
                text-align: center;
                line-height: 39px;
                font-size: 14px;
                color: #ffffff;

                i {
                    font-size: 16px;
                }
            }
        }
    }

    .tabs-top {
        position: sticky;
        top: 80px;
        left: 0;
        height: 50px;
        background: #1c87f3;
        display: flex;
        z-index: 997;
        // width: 1200px;
        // margin: 0 auto;
        justify-content: center;

        .tab {
            line-height: 50px;
            font-size: 14px;
            color: #ffffff;
            padding: 0 29px;
            cursor: pointer;
            user-select: none;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;

            &:hover {
                background: #1976d4;
            }
        }

        .tabs-active {
            background: #1976d4;
        }
    }

    .regulation-con {
        display: flex;
        justify-content: space-between;
        width: 1200px;
        margin: 0 auto;
        margin-top: 30px;
        padding-bottom: 30px;
        flex-direction: row-reverse;

        .left {
            position: sticky;
            top: 135px;
            left: 0;
            width: 254px;

            i {
                color: #ffffff;
            }
        }

        .left_flip {
            width: 320px;
            margin-left: 18px;

            .factor-sticky {
                margin-top: 20px;
                position: sticky;
                top: 147px;
            }
            .factor,
            .new_content {
                background: linear-gradient(360deg, #ffffff 82%, #e3f1ff 100%);

                .factor_title {
                    padding: 18px 24px 28px 27px;
                    font-size: 18px;
                    font-weight: 700;
                    color: #333333;
                    line-height: 20px;
                    display: flex;
                    align-items: center;
                    img {
                        width: 22px;
                        height: 22px;
                        margin-right: 10px;
                    }
                    .factor_icon {
                        color: #1c87f3;
                        margin-right: 10px;
                    }
                }

                .line {
                    height: 1px;
                    background: #f0f0f0;
                }

                .factor_content {
                    padding: 18px 24px 28px 30px;

                    .factor_item {
                        display: flex;
                        font-size: 14px;
                        font-weight: 500;
                        color: #999999;
                        line-height: 30px;

                        .item_label {
                            white-space: nowrap;
                        }

                        .item_txt {
                            color: #333333;
                            font-weight: 600;
                        }
                    }
                }
            }

            .new_content {
                margin-top: 20px;
                background: #ffffff;
                .factor_title {
                    background: linear-gradient(
                        360deg,
                        #ffffff 32%,
                        #e3f1ff 100%
                    );
                }
                .new_content_item {
                    margin-top: 18px;

                    .content_item {
                        display: block;
                        box-sizing: border-box;
                        border-bottom: 1px solid #f3f3f3;
                        padding: 0 19px 10px 23px;
                        margin-bottom: 17px;

                        .item_label {
                            font-size: 14px;
                            font-weight: 400;
                            color: #333333;
                            line-height: 26px;
                        }

                        &:last-child {
                            margin-bottom: 0;
                        }
                    }
                }
            }
        }

        .right {
            width: 925px;
            // background: #ffffff;
            // padding: 34px;
            box-sizing: border-box;

            .search2 {
                justify-content: center !important;

                .search-item2 {
                    .input {
                        width: 245px;
                    }

                    .label {
                        width: 110px;
                        text-align: right;
                    }
                }
            }

            .search {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-around;

                .search-item {
                    display: flex;
                    align-items: center;
                    font-size: 14px;
                    color: #333333;
                    margin-bottom: 22px;
                }

                .input {
                    margin-left: 10px;
                    width: 195px;
                }

                .date-picker {
                    margin-left: 10px;
                    margin-right: 260px;
                }
            }

            .search-but {
                text-align: center;
                padding-top: 10px;
            }

            .r-title {
                font-size: 16px;
                font-weight: 700;
                color: #333333;
                padding-top: 32px;
                padding-bottom: 20px;
            }
        }
    }

    .caozuo-list {
        display: flex;
        // padding: 0 21px;
        margin-bottom: 30px;
        justify-content: flex-end;
        align-items: center;
        height: 58px;
        background-color: #ffffff;
        border-bottom: 1px solid #f1f1f1;
        .caozuo-item {
            cursor: pointer;
            margin-left: 24px;
            display: flex;
            align-items: center;
            font-size: 12px;
            color: #666666;
            img {
                width: 20px;
                height: 20px;
                margin-right: 3px;
            }
        }
        .font-size-type {
            // border-top: 1px solid #666666;
            // border-bottom: 1px solid #666666;
            // border-left: 1px solid #666666;
            display: flex;
            align-items: center;
            margin-left: 10px;
            div {
                // border: 1px solid #666666;
                width: 24px;
                height: 24px;
                line-height: 22px;
                text-align: center;
                font-weight: 350;
                font-size: 15px;
                color: #9e9e9e;
                cursor: pointer;
                margin-left: 14px;
            }
            .size-active {
                color: #1c87f3;
            }
        }
    }

    .info {
        min-height: 80vh;

        .info-content {
            background: #ffffff;
            padding: 34px;
            padding-top: 0;
            // min-height: 600px;
        }

        .info-title {
            width: 696px;
            margin: 0 auto;
            margin-bottom: 20px;
            font-size: 22px;
            font-weight: 500;
            color: #333333;
            text-align: center;
            line-height: 30px;
            margin-bottom: 20px;
        }

        .info-abstract {
            width: 792px;
            margin: 25px 0;
            border: 1px dashed #fafafa;
            padding: 11px 0 7px 0;
            font-size: 12px;
            font-weight: 400;
            color: #999999;
            line-height: 22px;
        }
    }

    .info-basic {
        width: 767px;
        // height: 124px;
        padding: 24px;
        background: #f9fcff;
        // background: red;
        margin: 32px auto;
        margin-bottom: 43px;
        display: flex;
        // align-items: center;
        align-items: flex-start;
        // justify-content: flex-end;
        justify-content: space-around;
        flex-wrap: wrap;
        align-content: center;

        .info-basic-item {
            display: flex;
            // align-items: center;
            font-size: 14px;
            color: #6383a9;
            line-height: 20px;
            width: 47%;
            margin: 4px 0;

            .info-basic-label {
                width: 79px;
            }

            .info-basic-text {
                // margin-left: 10px;
                width: 100%;
                // width: 50%;
                // 单行
                // overflow: hidden;
                // white-space: nowrap;
                // text-overflow: ellipsis;
                // 多行
                // display: -webkit-box;
                // -webkit-box-orient: vertical;
                // -webkit-line-clamp: 2;
                // overflow: hidden;
                // text-overflow: ellipsis;
            }

            &:nth-child(2n) {
                // margin-left: 14px;
                // margin-right: 20px;
            }
        }
    }

    .xzts {
        display: flex;
        position: relative;
        left: -24px;
        margin-bottom: 25px;
        margin-top: 39px;

        .xzts-img {
            width: 120px;
            height: 120px;
            display: block;
            padding: 0;
            margin: 0;
            position: relative;
            left: 6px;
            top: 1px;
        }

        .xzts-text {
            min-height: 106px;
            width: 100%;
            background: #fff9e9;
            box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
            border-radius: 6px 6px 6px 6px;
            box-sizing: border-box;
            padding: 26px 16px;
            box-sizing: border-box;
            font-size: 12px;
            font-family: Source Han Sans CN-Regular, Source Han Sans CN;
            color: #877848;
            line-height: 22px;
            position: relative;

            .xzts-title {
                position: absolute;
                left: 18px;
                top: -13px;
                width: 70px;
                height: 27px;
                background: #385843;
                border-radius: 5px 5px 5px 5px;
                opacity: 1;
                border: 2px solid #e4be7a;
                font-size: 12px;
                font-family: Source Han Sans CN-Regular, Source Han Sans CN;
                font-weight: 400;
                color: #ffffff;
                line-height: 27px;
                text-align: center;
            }
        }
    }

    .reading {
        margin-top: 13px;
    }

    .content {
        word-wrap: break-word;

        img {
            max-width: 80%;
            // width: 90% !important;
            height: auto !important;
            // display: block;
            // margin: 0 auto;
            cursor: pointer;
        }

        a {
            text-decoration: underline;
            color: #2440b3 !important;

            &:hover {
                color: #315efb;
            }

            &:visited {
                color: #771caa;
            }
        }

        p,
        span,
        a {
            font-family: ZTGB2312;
            line-height: 2;
            // white-space: pre;
        }

        td,
        th {
            padding: 5px 10px;
            border: 1px solid #ddd;
        }
    }

    .font-small {
        p,
        span,
        a {
            font-size: 14px;
        }
    }

    .font-medium {
        p,
        span,
        a {
            font-size: 18px;
        }
    }

    .font-large {
        p,
        span,
        a {
            font-size: 24px;
        }
    }

    .tabs {
        border-bottom: 1px #e9e9e9 solid;
        width: auto;
        padding-top: 0;
    }

    .tabs .tab {
        width: 50%;
        text-align: center;
        margin: 0;
    }

    .el-submenu:not(:last-child) {
        border-bottom: 2px solid #f0f0f2;
    }

    .el-submenu__title {
        background-color: #1c87f3;
        color: #ffffff;
    }

    .el-submenu__title:hover {
        background-color: rgba($color: #1c87f3, $alpha: 0.8);
    }

    .el-menu-item.is-active {
        background-color: #f2f8ff;
    }

    .el-descriptions__title {
        font-size: 16px;
        font-weight: 400;
        color: #333333;
    }

    .el-descriptions-item__container {
        font-size: 13px;
        color: #999999;
    }

    .el-submenu__title i {
        color: #ffffff;
    }

    .el-submenu__title i::before {
        content: "\e6d9";
    }

    .el-submenu.is-opened > .el-submenu__title .el-submenu__icon-arrow {
        transform: rotateZ(0) !important;
    }

    .el-submenu.is-opened > .el-submenu__title .el-submenu__icon-arrow::before {
        content: "\e7a9";
    }

    .up-down {
        // margin-top: 11px;

        .prev-next {
            background-color: #ffffff;
            border-bottom-left-radius: 6px;
            border-bottom-right-radius: 6px;
            padding: 0 45px 10px;
            font-size: 14px;
            color: #999999;

            > div {
                display: flex;
                justify-content: space-between;
                padding-bottom: 10px;
                .name {
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    max-width: 667px;
                }
            }

            > div:hover {
                a {
                    text-decoration: underline;
                }
            }
            .time {
                color: #999999;
            }
        }
    }

    .wx-gzh-con {
        display: flex;
        align-items: center;
        padding: 20px 22px;
        img {
            width: 100px;
            height: 100px;
            margin-right: 16px;
        }
        .wx-gzh-con-text {
            font-size: 14px;
            font-family: OPPOSans, OPPOSans;
            font-weight: 400;
            color: #666666;
            line-height: 20px;
        }
        .wx-gzh-con-title {
            font-size: 18px;
            font-family: OPPOSans, OPPOSans;
            font-weight: 500;
            color: #333333;
            line-height: 20px;
            padding-bottom: 9px;
        }
    }
}
</style>